<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品 列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 消息提示 -->
      <el-row>
        <el-col>
          <el-alert
            title="消息提示的文案"
            type="info"
            center
            show-icon
            :closable="false"
          >
          </el-alert>
        </el-col>
      </el-row>
      <!-- 步骤条 -->
      <el-steps
        :space="240"
        :active="stepList - 0"
        finish-status="success"
        align-center
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 左测栏 -->
      <el-form
        ref="addGoodFormRef"
        :model="addGoodForm"
        :rules="addGoodFormRules"
        label-width="100px"
        label-position="top"
      >
        <el-tabs
          :tab-position="'left'"
          v-model="stepList"
          @tab-click="handdleTabClikck"
          :before-leave="toBeforLeave"
        >
          <el-tab-pane label="基本信息" name="0">
            <!-- 1 -->
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoodForm.goods_name"></el-input>
            </el-form-item>
            <!-- 2 -->
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addGoodForm.goods_price"></el-input>
            </el-form-item>
            <!-- 3 -->
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addGoodForm.goods_weight"></el-input>
            </el-form-item>
            <!-- 4 -->
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addGoodForm.goods_number"></el-input>
            </el-form-item>
            <!-- 5  级联选择器-->
            <el-form-item>
              <el-cascader
                v-model="addGoodForm.goods_cat"
                clearable
                :options="seledCates"
                :props="{
                  checkStrictly: true,
                  expandTrigger: 'hover',
                  value: 'cat_id',
                  label: 'cat_name',
                  children: 'children',
                }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <!-- 1 -->
          <el-tab-pane label="商品参数" name="1">
            <!-- 动态参数 -->
            <el-form-item v-for="(item, ind) in manyList" :key="ind">
              <!-- 动态参数 分类名字 -->
              {{ item.attr_name }}
              <el-checkbox-group v-model="item.attr_vals">
                <!-- 动态参数 分类名字下的内容 -->
                <el-checkbox
                  border
                  v-for="(txt, i) in item.attr_vals"
                  :key="i"
                  :label="txt"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <!-- 静态参数数据 -->
            <el-form-item v-for="(items, inds) in onlyList" :key="inds">
              {{ items.attr_name }}
              <el-input v-model="items.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3">
            <!-- 上传图片 -->
            <el-upload
              :action="actionUlr"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture"
              :headers="header"
              :on-success="uploadSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <quill-editor v-model="addGoodForm.goods_introduce"> </quill-editor>
            <el-button type="primary" class="issok" @click="adds"
              >确认新增</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <!-- 预览图片对画框 -->
    <el-dialog title="提示" :visible.sync="isshowPrve" width="50%">
      <img class="imgss" :src="perviwPath" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  created () {
    this.getCateList()
  },
  data () {
    return {
      // 完成步骤序号
      stepList: '0',
      // 添加商品数据对象
      addGoodForm: {
        goods_name: '', // 名字
        goods_price: '', // 价格
        goods_weight: '', // 重量
        goods_number: '', // 数量
        goods_cat: [], // 商品分类id数组
        pics: [], // 商品图片数组
        goods_introduce: '', // 商品详情描述
        attrs: [] //

      },
      // 添加商品数据对象效验规则
      addGoodFormRules: {
        goods_name: [
          { required: true, message: '请输入名字', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入重量', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ]

      },
      // 级联选择器 绑定的分类数据列表
      seledCates: [],
      // 动态 attr_vals 数据
      manyList: [],
      // 静态 attr_vals 数据
      onlyList: [],
      // 图片上船地址
      actionUlr: 'http://127.0.0.1:8888/api/private/v1/upload',
      // 上传图片的请求头
      header: {
        // 上传图片 里面没有token所以要手动添加
        Authorization: window.sessionStorage.getItem('token')
      },
      // 点击图片预览路径
      perviwPath: '',
      // 预览图片对画框开关
      isshowPrve: false

    }
  },
  methods: {
    // 获取商品分类数据

    // 选项卡点击事件切换函数
    async handdleTabClikck () {
      switch (this.stepList) {
        // 获取动态参数数据
        case '1': {
          this.setp1()
          break
        }
        // 获取静态参数数据
        case '2': {
          this.setp2()
          break
        }
      }
    },
    // 请求动态数据
    async setp1 () {
      const { data: resData } = await this.$http.get(
        `categories/${this.sanid}/attributes`,
        {
          params: { sel: 'many' }
        }
      )
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }

      // 如果成功 吧里面的attr_vals 转成数组
      resData.data.forEach((ele) => {
        ele.attr_vals = ele.attr_vals.split(',')
      })
      // 吧 attr_vals 里面的数据转数组 如何赋值给新数组
      this.manyList = resData.data
    },
    // 请求静态数据
    async setp2 () {
      const { data: resData } = await this.$http.get(
        `categories/${this.sanid}/attributes`,
        {
          params: { sel: 'only' }
        }
      )
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 成功 给静态数据项
      this.onlyList = resData.data
      console.log(this.onlyList)
    },
    // 下拉列表改变事件
    handleChange () {
      if (this.addGoodForm.goods_cat.length < 3) {
        // 让下拉框数据为空
        this.addGoodForm.goods_cat = 0
      }
    },
    //   获取所有商品分类数据-----
    async getCateList () {
      const { data: resData } = await this.$http.get('categories')
      //   判断是否失败
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 如果成功 1 保存数组
      this.seledCates = resData.data
    },
    // tab 切换前 触发 进入后 进入前 标签名字
    toBeforLeave (activeTabName, oldTabName) {
      // 必须是第0个基本信息选择 商品分类后才可以切换tab
      if (oldTabName === 0 && this.addGoodForm.goods_cat.length !== 3) {
        this.$message.warning('需要选择商品分类~~')
        // r如果没有选择商品分类 那木就不能就进行Tab 切换
        return false
      }
    },
    // 图片预览事件方法
    handlePreview (fifl) {
      // 获取点击预览服务器端完整的路径
      const urls = fifl.response.data.url
      this.perviwPath = urls
      this.isshowPrve = true
    },
    // 图片删除事件方法
    handleRemove (remove) {
      const Fh = remove.response.data.tmp_path
      const findex = this.addGoodForm.pics.findIndex((ele) => {
        return ele.pic === Fh
      })
      // 根据下标删除图片数组连的数句
      this.addGoodForm.pics.splice(findex, 1)
      this.$message.success('删除图片成功~~')
    },
    // 图片上传成功的函数
    uploadSuccess (res) {
      //  上传成功 后 把图片的路径传入 pics 中
      this.addGoodForm.pics.push({
        pic: res.data.tmp_path
      })
      console.log(this.addGoodForm.pics)
    },
    // 新增商品最后确认按钮
    adds () {
      // 验证提交的信息是否没，满足要求
      this.$refs.addGoodFormRef.validate(async (ele) => {
        if (!ele) {
          // 切换到第一个不满足的地方
          this.stepList = '0'
          return this.$message.error('数据填写不完整~~')
        }
        // 将动态数据添加到 pics 中
        this.manyList.forEach(item => {
          // 动态参数上传需要的格式
          const temp = {
            attr_id: item.attr_id,
            attr_value: item.attr_vals.join(',')
          }
          // 添加到数组中
          this.addGoodForm.attrs.push(temp)
        })
        // 将静态数据添加到 pics 中
        this.onlyList.forEach(item => {
          // 动态参数上传需要的格式
          const temp = {
            attr_id: item.attr_id,
            attr_value: item.attr_vals
          }
          // 添加到数组中
          this.addGoodForm.attrs.push(temp)
        })
        // ------

        // 克隆数据
        const formData = _.cloneDeep(this.addGoodForm)
        // 用 ，拆分数据搞成对象
        formData.goods_cat = formData.goods_cat.join(',')

        //  提交数据
        const { data: resData } = await this.$http.post('goods', formData)
        if (resData.meta.sta0tus !== 201) return this.$message.error('添加商品失败~~')
        this.$message.success('添加商品成功~~~~')
        // c成功后跳转页面
        this.$router.push('/goods')
      })
    }
  },
  computed: {
    sanid () {
      if (this.addGoodForm.goods_cat.length < 3) {
        return null
      }
      return this.addGoodForm.goods_cat[2]
    }
  }
}
</script>

<style lang="postcss" scoped>
.el-checkbox {
  margin: 0 5px 0 0 !important;
}
.imgss {
  width: 100%;
  height: 100%;
}
.issok {
  margin-top: 15px;
}
</style>
